<template>
  <el-main>
    <el-button icon="el-icon-plus" type="primary" circle @click="add"></el-button>
    <br>
    <br>
    <el-col :span="24" class="warp-main">
      <el-form :inline="true" :rules="addFormRules" ref="addRuleFormRef" class="demo-form-inline" v-for="(item, index) in paymentInfo" :key="index">
        <el-card>
          <el-col :span="21">
            <el-form-item label="支付项" label-width="90px">
              <el-input v-model="item[index].payItems"></el-input>
            </el-form-item>
            <el-form-item label="规格" label-width="60px">
              <el-input v-model="item[index].payAttr"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="金额" label-width="90px">
              <el-input v-model="item[index].payNumber"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="备注" label-width="90px">
              <el-input type="textarea" v-model="item[index].remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button icon="el-icon-delete" type="danger" circle @click="del(index)"></el-button>
          </el-col>
        </el-card>
      </el-form>
    </el-col>
  </el-main>


</template>

<script>
export default {
  name: "AddPaymentItems",
  data() {
    return {
      paymentInfo: [
        {
          payItems: '',
          payAttr: '',
          payNumber: '',
          remark: ''
        }
      ],
      // paymentInfo: {
      //   payItemsArray: [{
      //     payItems: '',
      //     payAttr: '',
      //     payNumber: '',
      //     remark: ''
      //   }]
      // },
      addFormRules: {
        dormId: [
          {required: true, message: '宿舍编号不可为空', trigger: 'blur'}
        ],
        dormName: [
          {required: true, message: '宿舍名称不可为空', trigger: 'blur'}
        ],
        dormType: [
          {required: true, message: '请选择宿舍类别', trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    add() {
      this.paymentInfo.push({
        value: ''
      })
      console.log(this.paymentInfo)
    },
    del(index) {
      this.paymentInfo.splice(index, 1)
    },
    addItems() {
      this.paymentInfo.payItemsArray.push({});
    },
    delItems(index) {
      this.paymentInfo.payItemsArray.splice(index, 1);
    },
  }
}
</script>

<style scoped>
.el-card {
  margin-bottom: 8px;
}
</style>
